关于服务启动按钮页面的优化

发表于 | 分类于 | | 阅读次数
| 字数统计 1,255 | 阅读时长 6

关于服务启动按钮页面的优化

原则

  1. 同一个服务器只允许启动一个按钮,也就是只能触发一个启动/关闭/重启的功能。不同的服务器是可以同时异步触发的。
  2. 启动或关闭是异步进行的。
  3. 启动或关闭的时候，同一个服务器的上按钮变灰色，并且不能点击。

问题

由于妹子ui的模态框在数据传输存在bug,详情撮: http://amazeui.org/javascript/modal
所以在多个异步并发执行的时候出现各种Bug.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function() {
  $('#doc-modal-list').find('.am-icon-close').add('#doc-confirm-toggle').
    on('click', function() {
      $('#my-confirm').modal({
        relatedTarget: this,
        onConfirm: function(options) {
          var $link = $(this.relatedTarget).prev('a');
          var msg = $link.length ? '你要删除的链接 ID 为 ' + $link.data('id') :
            '确定了，但不知道要整哪样';
          alert(msg);
        },
        // closeOnConfirm: false,
        onCancel: function() {
          alert('算求，不弄了');
        }
      });
    });
});

通过 relatedTarget 这个钩子获取数据，如上面的演示，以该元素为桥梁获取想要的数据（2.1 开始支持）；

最初代码的引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
$('#my-confirm').modal({
        relatedTarget: this,
        onConfirm: function(options) {
            if (start_store != undefined) {
              $("#msgtips").html('[服务器名称:' + start_store.alias + '] 正在启动,请等待启动完成或使用批量启动.');  
              $('#my-alert').modal('open');
              return;
            }else{
              store.set('start_store', { code: '1', alias: dename })  
            };
            my_this = this.relatedTarget;
            $.ajax({
             type: "POST",
             async:true,
             url: "/api/service",
             cache: false,
             data: data,
             dataType: "json",
             success: function(res){
                var alias =  res.data.data[0].alias;             
                var code =  res.data.data[0].code;             
                var reskey =  res.data.data[0].key;             
                var msg =  res.data.data[0].msg;             
                var resnetwork_ip =  res.data.data[0].network_ip;             
                console.log(res);
                if ( code == 1 ) {
                    $("#msgtips").html('[服务器名称:'+alias+'启动成功!');  
                    $('#my-alert').modal('open');
                    closeloading(my_this);
                }else{
                    $("#msgtips").html('[服务器名称:'+alias+']启动失败,'+msg+'!');  
                    $('#my-alert').modal('open');
                    closeloading(my_this);
                }
                store.remove('start_store');
                closeloading(my_this);
                
                
            },
            error:function(){     
                $("#msgtips").html('[服务器名称:'+$(my_this).attr("dename")+'] 请求失败,请联系管理员!');  
                $('#my-alert').modal('open');
                closeloading(my_this);
                store.remove('start_store');     
            } 
        });
        },
        onCancel: function() {
          my_this = this.relatedTarget; 
          closeloading(my_this);
          // var store = $.AMUI.store;
          store.remove('start_store');
        }
  });

改进后代码的引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
$('#my-confirm').modal({
       relatedTarget: this,
       onConfirm: function(options) {
           var my_this ;
           my_this = this.relatedTarget;
           if (start_store != undefined) {
             $("#msgtips").html('[服务器名称:' + start_store.alias + '] 正在启动,请等待启动完成或使用批量启动.');  
             $('#my-alert').modal('open');
             closeloading(my_this);
             return;
           }else{
             store.set('run_service_allow_one', { code: '1', alias: dename })  
           };
           data = store.get('data');
           
           $.ajax({
            type: "POST",
            async:true,
            url: "/api/service",
            cache: false,
            data: data,
            dataType: "json",
            success: function(res){
               console.log('get res result:');
               console.log(res);
               // 
               var code =  res.data.data[0].code; 
               console.log(code);
               if (code == 10020) {
                   $("#msgtips").html('[服务器名称:'+res.get_status.data.data[0].related_servername+']'+res.msg + '<br/> 最后时间: '+ res.get_status.data.data[0].updated_time + '<br/> 动作: '+ res.get_status.data.data[0].action + ' 操作人: '+ res.get_status.data.data[0].operation );  
                   $('#my-alert').modal('open');
                   closeloading(my_this);
               } else if (code == 10041){                   
                   $("#msgtips").html('[服务器名称:'+res.get_status.data.data[0].related_servername+']'+res.msg + '<br/> 最后时间: '+ res.get_status.data.data[0].updated_time + '<br/> 动作: '+ res.get_status.data.data[0].action + ' 操作人: '+ res.get_status.data.data[0].operation );  
                   $('#my-alert').modal('open');
                   closeloading(my_this);
               }else if (code == 10042){
                   $("#msgtips").html('[服务器名称:'+res.get_status.data.data[0].related_servername+']'+res.msg + '<br/> 最后时间: '+ res.get_status.data.data[0].updated_time + '<br/> 动作: '+ res.get_status.data.data[0].action + ' 操作人: '+ res.get_status.data.data[0].operation );  
                   $('#my-alert').modal('open');
                   closeloading(my_this);                
               }else if (code == 1 ){
                   var alias =  res.data.data[0].alias;           
                   var reskey =  res.data.data[0].key;             
                   var msg =  res.data.data[0].msg;             
                   var resnetwork_ip =  res.data.data[0].network_ip;                                     
                   $("#msgtips").html('[服务器名称:'+alias+'启动成功!');  
                   $('#my-alert').modal('open');
                   closeloading(my_this);
               }else{
                   var alias =  res.data.data[0].alias;           
                   var reskey =  res.data.data[0].key;             
                   var msg =  res.data.data[0].msg;             
                   var resnetwork_ip =  res.data.data[0].network_ip; 
                   console.log(my_this);                   
                   $("#msgtips").html('[服务器名称:'+alias+']启动失败,'+msg+'!');  
                   $('#my-alert').modal('open');
                   closeloading(my_this);                  
               }
               store.remove('run_service_allow_one');
               closeloading(my_this);
               
               
           },
           error:function(){     
               $("#msgtips").html('[服务器名称:'+$(my_this).attr("dename")+'] 请求失败,请联系管理员!');  
               $('#my-alert').modal('open');
               closeloading(my_this);
               store.remove('run_service_allow_one');     
           } 
       });
       },
       onCancel: function() {
         var my_this ;
         my_this = this.relatedTarget; 
         closeloading(my_this);
         // var store = $.AMUI.store;
         store.remove('run_service_allow_one');
       }
 });

  • 我这边的主要的问题现象:
    1. 同一个页面点击启动，再次点击启动或关闭，还是上一次的post传参。
    2. 正在启动中或者关闭中的那个提示在点击多次时后面不能正常返回。比如我同时点击了启动和关闭，然后页面显示启动中和关闭中，然后返回数据后，启动中按钮变回启动，但是关闭中一直没返回。

解决

针对以上的问题后面的代码已经解决，主要是妹子ui模态框传参的Bug问题，调用多次模态框模块框只会保存第一次运行时的数据。

第1个问题: 通过store存储传参，每点击一次覆盖前一次的参数。(可能存在的问题: 如果启用无缝浏览则无法传data参数，如果点击过快参数赋值就会错乱，但是这种情况应该很少，参数赋值那块也就微妙级别，人的手工基本不会达到那种地步) 还有种方法就是通过relatedTarget钩子重新获取数据。推荐这个方法。

第2个问题: 其实使用了relatedTarget钩子，但变量初始化的时候存在问题，之前没有var 定义局部变量，导致后面点击有可能获取全局变量的数据，导致my_this对象串了。重新初始化变量就OK了。

上图:
Alt text

Alt text

坚持原创技术分享，您的支持将鼓励我继续创作！